<template>
  <el-dialog :model-value="dialogData.isShow" :title="dialogData.id?'编辑':'新增'"
             @close="closeDialog" draggable>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="90px">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="form.title" maxlength="255" placeholder="请输入文章标题"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="首图" prop="images" style="height: 200px">
            <Upload v-model:value="form.images" type="image"
                    :customStyle="{'width':'120px','height':'120px'}"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="文章内容" prop="content">
            <div>
              <WangEditor v-model="form.content"/>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
<!--        <el-col :span="12">-->
<!--          <el-form-item label="文章图片" prop="images">-->
<!--            <el-input type="textarea" v-model="form.images" maxlength="2048" placeholder="请输入文章图片"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="24">
          <el-form-item label="浏览量" prop="browseCount">
            <el-input-number type="text" v-model="form.browseCount" placeholder="请输入浏览量"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="分类">
            <el-tree-select
              v-model="formSelect.categoryIds"
              :data="categoryList"
              multiple
              check-strictly
              :render-after-expand="false"
              show-checkbox
              style="width: 240px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专题">
            <el-select
                v-model="formSelect.topicsIds"
                multiple
                placeholder="请选择专题"
                style="width: 240px"
            >
              <el-option
                  v-for="item in topicsList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专家">
            <el-select
                v-model="formSelect.expertIds"
                multiple
                placeholder="请选择专家"
                style="width: 240px"
            >
              <el-option
                  v-for="item in expertList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {addArticle, getArticle, updateArticle} from "@/api/app/article";
import {getAllArticleCategoryTreeList} from "@/api/app/articleCategoty";
import {getExpertList} from "@/api/app/expert";
import {getArticleTopicsList} from "@/api/app/articleTopics";

const formRef = ref<FormInstance>()

const emits = defineEmits<{
  (event: 'refresh'): void
}>()

// 表单
let form: any = ref({
  id: null,
  title: null,
  content: null,
  images: null,
  browseCount: null,
});

const categoryList = ref([])

const topicsList = ref([])

const expertList = ref([])

let formSelect: any = ref({
  categoryIds: [],
  topicsIds: [],
  expertIds: [],
})

// 效验规则
const rules = reactive<FormRules>({
  title: [
    {
      required: true,
      message: '请输入标题',
      trigger: 'blur',
    },
  ],
  content: [
    {
      required: true,
      message: '请输入内容',
      trigger: 'blur',
    },
  ],
  browseCount: [
    {
      required: true,
      message: '请输入浏览量',
      trigger: 'blur',
    },
  ]
})

// 获取详情
const getDetails = (data: any) => {
  console.log(data)
  let value = {
    "id": data.id,
    "type": data.type.code
  }
  getArticle(value).then(res => {
    console.log(res, 'res')
    form.value = Object.assign({}, form.value, res);
    formSelect.value = Object.assign({}, formSelect.value, res);
  })
}

// 弹框数据
const dialogData = reactive({
  isShow: false,
  id: null
})

// 打开弹框
const openDialog = async (data: any) => {
  dialogData.isShow = true;
  dialogData.title = '新增文章';
  getCategoryList()
  getTopicsPage()
  getAllExpertList()
  if (data) {
    dialogData.id = data.id;
    dialogData.title = '编辑文章';
    getDetails(data);
  }
}

// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  dialogData.id = null;
  form.value = {};
  formSelect.value = {};
}
// 提交

const submit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid: any) => {
    if (valid) {
      form.value.categoryIds = formSelect.value.categoryIds
      form.value.topicsIds = formSelect.value.topicsIds
      form.value.expertIds = formSelect.value.expertIds
      let data = form.value;
      if (data.id) {
        data.type = form.value.type.code
        updateArticle({...data}).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      } else {
        data.type = "RAW"
        addArticle({...data}).then(() => {
          ElMessage.success('操作成功');
          closeDialog();
          emits('refresh');
        })
      }
    }
  })
}

const getCategoryList = () => {
  getAllArticleCategoryTreeList({}).then(res => {
    if (res.length) {
      let data = [...res]
      function fun(dataList) {
        dataList.map(item => {
          if (item.children) fun.call(this, item.children)
          Object.assign(item, { value: item.id, label: item.categoryName })
        })
      }
      fun.call(this, data)
      categoryList.value = data
    }
  })
}

const getTopicsPage = () => {
  getArticleTopicsList({}).then(res => {
    topicsList.value = res
  })
}

const getAllExpertList = () => {
  getExpertList().then(res => {
    expertList.value = res
  })
}

defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
